import industrialTaxPie from './images/industrialTaxPie.png'

const Pie4Option = ({ data, color }) => {
  let sum = data.reduce(function (prev, cur) {
    return cur.value + prev
  }, 0)

  let client_width = document.body.clientWidth

  return {
    title: {
      // zlevel: 0,
      text: sum,
      textAlign: 'center',
      left: '24%',
      top: '35%',
      itemGap: 5,
      textStyle: {
        color: '#00165D',
        fontSize: (22 * client_width) / 1920, // 22
        lineHeight: (22 * client_width) / 1920,
      },
      subtext: '税收总额',
      subtextStyle: {
        color: '#7D849B',
        fontSize: (14 * client_width) / 1920, // 14
        lineHeight: (14 * client_width) / 1920,
      },
    },
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)',
      backgroundColor: 'rgba(16, 37, 57, 0.7)',
      borderRadius: 5,
      borderWidth: 0,
      textStyle: {
        align: 'left',
        color: '#fff',
      },
    },
    legend: {
      top: 'center',
      orient: 'vertical',
      right: '5%',
      width: 200,
      // borderWidth: 0,
      // itemWidth: 12,
      // itemHeight: 12,
      // borderRadius: 18,
      // eslint-disable-next-line max-len
      icon: 'path://m2,6c0,-2 2,-4 4,-4c2,0 4,2 4,4c0,2 -2,4 -4,4c-2,0 -4,-2 -4,-4z',

      textStyle: {
        color: 'black',
        rich: {
          a: {
            width: 45,
          },
          0: {
            color: color[0],
            width: 20,
          },
          1: {
            color: color[1],
            width: 20,
          },
          2: {
            color: color[2],

            width: 20,
          },
          3: {
            color: color[3],

            width: 14,
          },
          4: {
            color: color[4],
            width: 20,
          },
          5: {
            color: color[5],
            width: 20,
          },
        },
      },
      formatter: function (name) {
        let index = data.findIndex((item) => item.name == name)
        let value = data[index].value
        return (
          '{a|' + name + '}   ' + '{' + index + '|' + '占比 ' + value + '%}'
        )
      },
    },
    graphic: {
      elements: [
        {
          type: 'image',
          style: {
            image: industrialTaxPie,
            width: (110 * client_width) / 1920, // 110px
            height: (110 * client_width) / 1920, // 110px
          },
          left: (110 * client_width) / 1920,
          top: 'center',
        },
      ],
    },
    series: [
      {
        type: 'pie',
        radius: ['60%', '70%'],
        center: ['25%', '50%'],
        // hoverAnimation: false,
        // stillShowZeroSum: false,
        avoidLabelOverlap: false,
        // zlevel: 1,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#f5f7fe',
          borderWidth: 4,
        },
        label: {
          show: false,
        },
        data,
      },
    ],
    color,
  }
}

export { Pie4Option }
